<template>
    <div :id="id"></div>
</template>
<script>
    import * as FWindow from '../util/FWindow'

    export default{
        props: ['id', 'widthRate', 'heightRate', 'heightFix', 'slRate', 'model'],
        methods: {
            setOption: function (option) {
                var echarts = require('echarts');
                var ctx = this;
                resize(ctx.id, ctx.widthRate, ctx.heightRate, ctx.heightFix, ctx.slRate)
                var dom = document.getElementById(ctx.id)
                var chart = echarts.init(dom)
                chart.setOption(option)

                $(window).resize(function () {
                    resize(ctx.id, ctx.widthRate, ctx.heightRate, ctx.heightFix, ctx.slRate)
                    chart.resize();
                })
            }
        }
    }


    function resize(id, widthRate, heightRate, heightFix, slRate) {
        var {width,height} = FWindow.windowSize();
        if (slRate) {
            //全屏视图，贴合长宽比，居中显示
            var margin_top, margin_left;
            if (width > height) {
                var allWidth = width
                width = height * slRate
                margin_left = (allWidth - width) / 2
            } else {
                var allHeight = height;
                height = width * slRate
                margin_top = (allHeight - height) / 2
            }
            height = heightFix ? height + Number(heightFix) : height;
            setCss(width, height, margin_top, margin_left);
        } else {
            //插入视图，贴合宽度，半长显示
            width = widthRate ? width * widthRate : width * 19 / 20;
            height = heightRate ? height * heightRate : height / 2;
            height = heightFix ? height + Number(heightFix) : height;
            setCss(width, height, 0, 0);
        }


        function setCss(width, height, margin_top, margin_left) {
            $('#' + id).css('height', height);
            $('#' + id).css('width', width);
            $('#' + id).css('margin-left', margin_left);
            $('#' + id).css('margin-top', margin_top);
        }

        function small(a, b) {
            return a > b ? b : a
        }
    }
</script>
